
<template>
    <div class="edu-page-warp">
        <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="filterTaskSubmit"
            @reset="resetForm('queryForm')"
        >
            <el-form ref="queryForm" :model="query" label-position="left" label-width="80px">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="学院:" prop="departmentId" class="no-bottom">
                            <el-select
                                v-model="query.departmentId"
                                placeholder="选择学院"
                                @change="changeFaculty"
                                filterable
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.faculty"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="专业:" prop="major" class="no-bottom">
                            <el-select v-model="query.major" placeholder="选择专业" style="width: 100%">
                                <el-option
                                    v-for="item in options.profession"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="审批状态:" prop="status" class="no-bottom">
                            <el-select
                                v-model="query.status"
                                placeholder="选择审批状态"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.status"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="起始时间:" prop="startTime" class="no-bottom">
                            <el-date-picker
                                v-model="query.startTime"
                                :picker-options="pickerOptions"
                                type="datetime"
                                placeholder="选择开始时间"
                                format="yyyy/MM/dd HH:mm"
                                value-format="timestamp"
                                align="right"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="终止时间:" prop="endTime" class="no-bottom">
                            <el-date-picker
                                v-model="query.endTime"
                                :picker-options="pickerOptions"
                                type="datetime"
                                placeholder="选择开始时间"
                                format="yyyy/MM/dd HH:mm"
                                value-format="timestamp"
                                align="right"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </ConditionCard>
        <el-card v-loading="loading" shadow="never" body-style="padding: 24px;" class="card-margin">
            <h1 class="condition-title">审批列表</h1>
            <div class="div-main clearfix">
                <div class="float-left">
                    <!-- <el-input
            v-model="query.studentId"
            placeholder="工号 学号或姓名"
            prefix-icon="el-icon-search"
            @change="handSearchChang"
                    />-->
                </div>
                <div class="float-right">
                    <!-- <el-button @click="exportDate">导出</el-button> -->
                </div>
            </div>
            <el-table :data="taskList" style="border-top: 1px solid #ebeef5; width: 100%" tooltip-effect="light">
                <!-- <el-table-column type="selection" width="55" stripe></el-table-column> -->
                <el-table-column prop="applyNo" label="申请编号" min-width="150"></el-table-column>
                <el-table-column label="流程编号" min-width="120" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.no }}</template>
                </el-table-column>
                <el-table-column label="申请人" min-width="100">
                    <template slot-scope="scope">{{ scope.row.applicantName }}</template>
                </el-table-column>
                <el-table-column label="申请类型" min-width="80">
                    <template slot-scope="scope">{{ scope.row.wfTypeName }}</template>
                </el-table-column>
                <!-- <el-table-column label="申请人编号"><template slot-scope="scope">{{ scope.row.applicantId }}</template></el-table-column> -->
                <el-table-column label="申请时间" min-width="150" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
                </el-table-column>
                <el-table-column label="审批状态" min-width="80">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 'Process'" type="success">进行中</el-tag>
                        <el-tag v-if="scope.row.status == 'End'" type="info">通过</el-tag>
                        <el-tag v-if="scope.row.status == 'Reject'" type="warning">已驳回</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="下一级审批人" min-width="120" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.approvorName}}</template>
                </el-table-column>
                <el-table-column label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.status != 'Process'"
                            type="text"
                            size="mini"
                            @click="showRollDetail(scope.row.no)"
                        >查看明细</el-button>
                        <el-button
                            v-if="scope.row.status == 'Process'"
                            type="text"
                            size="mini"
                            @click="showRollDetail(scope.row.no)"
                        >审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        :current-page="query.pageNum"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="query.pageSize"
                        :total="query.total"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="float: right;margin:10px 60px 0 0;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import { selectTaskList } from "common/src/api/approval";
import { queryDic } from "common/src/api/dictionary";
import { getGraduateDegreePage } from "common/src/api/resource/course";
import filters from "common/src/filters";
export default {
    name: "teacher-roll-check",
    filters: {
        formatDate(date) {
            return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
        }
    },
    data() {
        return {
            query: {
                total: 0,
                startTime: "",
                endTime: "",
                departmentId: "",
                major: "",
                status: "",
                studentId: "",
                wfType: this.$route.params.id,
                pageNum: 1,
                pageSize: 20
            },
            options: {
                status: [
                    {
                        value: "",
                        label: "全部"
                    },
                    {
                        value: "Process",
                        label: "进行中"
                    },
                    {
                        value: "End",
                        label: "已结束"
                    },
                    {
                        value: "Reject",
                        label: "已驳回"
                    }
                ],
                faculty: [],
                profession: []
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        }
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        }
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        }
                    }
                ]
            },
            taskList: []
        };
    },
    created() {
        this.initOptions();
        this.initPage();
    },
    methods: {
        async initPage() {
            let tasks = "";
            try {
                tasks = await selectTaskList(this.query);
                this.loading = false;
                if (tasks.code === 200) {
                    this.query.total = tasks.data.total_;
                    this.taskList = tasks.data.list;
                }
            } catch (err) {
                this.loading = false;
            }
        },
        initOptions() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_YX"]
            };
            queryDic(data).then(res => {
                if (res.code === 200) {
                    this.fillSelect(res.data);
                    this.filterTaskSubmit();
                }
            });
        },
        changeFaculty(val) {
            this.query.major = "";
            this.options["profession"] = [];
            let promise = this.getGraduateDegreePage(val);
            promise.then(response => {
                if (response.code === 200) {
                    response.data.list.map(item =>{
                        this.options["profession"].push({
                            value: item.code,
                            label: item.name
                        })
                    });
                }
            });
        },
        getGraduateDegreePage(college) {
            const data = {
                college: college,
                page: false
            };
            return getGraduateDegreePage(data);
        },
        fillSelect(data) {
            this._fill("faculty", data.X_YX);
            // this._fill("profession", data.G_ZY);
        },
        _fill(type, data) {
            for (const key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                });
            }
        },
        async handSearchChang() {},
        handleSizeChange(pageSize) {
            this.query.pageSize = pageSize;
            this.query.pageNum = 1;
            this.initPage(this.queryItem);
        },
        handleCurrentChange(pageNum) {
            this.query.pageNum = pageNum;
            this.initPage(this.queryItem);
        },
        exportDate() {},
        showRollDetail(id) {
            this.$router.push("/TeacherRollDetail?id=" + id);
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        filterTaskSubmit() {
            this.initPage();
        }
    }
};
</script>
<style scoped>
 .div-main {
        margin-bottom: 16px;
    }
</style>
